<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 布局练习</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>
            CSS 布局练习
        </h1>
    </header>
    <main>
        <section>
            <h2>Flexbox</h2>
            <p>Flex box 布局模型的主要目的是提供更有效率的布局方式，尤其是当容器内元素的尺寸不固定的时候更能表现出它的优势。它能够自动识别子元素的尺寸，从而为盒装模型提供更高的灵活性。</p>
            <div class="flexbox">
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。1</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。2</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。3</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。4</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。5</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。6</p>
                <p>如果元素采用Flex进行布局，那么这个元素就可以称为Flex容器（Flex container），元素的所有子元素称为Flex项目（Flex item）。7</p>
            </div>
        </section>
        <section>
            <h2>column</h2>
            <p>分栏布局提供了一种将内容按列排列的方法，就像在报纸上看到的那样。但是创建的列不能单独设置样式，无法使一列比其他列大，或更改单个列的背景或文本颜色。</p>
            <div class="column">
                <p>column-count 属性用来设置列的数量。浏览器可以计算并分配每个列的空间。1</p>
                <p>column-width 属性用来指定列的宽度。浏览器将为提供指定大小的列。然后，剩余的空间将在现有列之间共享。2</p>
                <p>column-gap 属性用来更改列之间的间距大小。3</p>
                <p>column-rule 属性用来指定列之间的边框，接受同border的值。4</p>
                <p class="column-span">column-span 属性可以实现元素跨越所有栏。值为none和all。多栏会中断，并在跨栏元素之后继续创建新的列框集。5</p>
                <p class="break-avoid">还可以使用break-inside:avoid的属性，控制多栏之间内容的中断方式。6</p>

            </div>
        </section>
        <section>
            <h2>grid</h2>
            <p>网格（Grid）是水平线和垂直线的集合，使用网格排版，可使元素在页面之间移动时不会跳动或改变宽度，从而在网站上提供更高的一致性。要定义网格，需要将display的值设为grid。</p>
            <div class="grid">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
                <p>5</p>
            </div>
        </section>
    </main>
    <footer></footer>
</body>

</html>
